<template>
  <div id="near_search" ref="near_search">
    <c-title :hide="false" text="推荐商品搜索结果"></c-title>
    <div class="content">
        <div class="top-search">
          <div class="search" >
            <i class="iconfont icon-sousuo1" @click="search"></i>
            <form @submit.prevent action="#" id="search-form">
              <input placeholder="请输入搜索关键词" type="search" v-model="kwd" @keyup.enter="search" @focus="searchFocusr" @blur="searchBlur" ref="search_input"></input>
            </form>
          </div>
        </div>
        <!-- <div class="search" >
        <input placeholder="请输入关键字搜索" type="text" v-model="kwd"></input>
        <i class="iconfont icon-sousuo1" @click="search"></i>
        </div> -->
        <div class="records-pane" v-if="inputShow && historicalRecord.length">
          <div class="history-row">
            <span class="history-name">搜索历史</span>
            <i class="iconfont icon-fontclass-shanchu" @click="clearHistoryData"></i>
          </div>
          <div class="history-content">
            <span class="detail-rol" v-for="(item,index) in historicalRecord" :key="index">
              <span class="detail-name" @click="searchHistoricalRecord(item)">{{item}}</span>
              <van-icon name="cross" @click="delHistoricalRecord(index)"/>
            </span>
          </div>
        </div>
        <div class="bottom-content scroll-content" >
          <div class="goods-box" v-for="(item,index) in datas" :key="index">
            <img :src="item.change_thumb" alt="">
            <div class="goods-detail">
              <div class="goods-name">{{item.title}}</div>
              <div class="bot-price">
                <span class="price-name"><span class="icon-sty">{{$i18n.t('money') }}</span>{{item.price}}</span>
                <span class="add-icon" v-if="!item.isAdd" @click="clickAdd(index)"><van-icon name="plus" /></span>
                <span class="del-icon" v-if="item.isAdd" @click="clickDel(index,item.id)"><van-icon name="minus" /></span>
              </div>
            </div>
          </div>
        </div>
    </div>
    <div class="fixed " :class="[fun.getPhoneEnv() == 3 ? 'pc' : '']">
      <div class="fixed-top">
        <div class="cho-goods" @click="showPopup = true">
          <span class="icon-box">
            <i class="iconfont icon-gouwuche_"></i>
          </span>
          <span class="cho-num">{{result.length}}</span>
        </div>
        <div>商品展示数量:<span> {{show_num}}</span></div>
      </div>
      <div class="btn" @click="add">
        确定
      </div>
    </div>

    <van-popup v-model="showPopup" position="bottom" :style="{ 'max-height': '40%' }">
      <div class="popup-box">
        <div class="popup-top">
          <span class="popup-top-left">已选{{result.length}}件</span>
          <span class="popup-clear" @click="clearChooseGoods"><i class="iconfont icon-fontclass-shanchu"></i> 清空</span>
        </div>
        <div class="bottom-content" style="margin: 0;">
          <div class="goods-box" v-for="(item,index) in chooseGoods" :key="index" style="padding-left: 0;">
            <img :src="item.change_thumb" alt="" class="popup-img">
            <div class="goods-detail">
              <div class="popup-name goods-name">{{item.title}}</div>
              <div class="bot-price">
                <span class="price-name"><span class="icon-sty">{{$i18n.t('money') }}</span>{{item.price}}</span>
                <span class="del-icon" @click="delChooseGoods(index,item.id)"><van-icon name="minus" /></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import near_search_controller from "./near_search_controller";

export default near_search_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#near_search {
  padding-bottom: 5rem;
  .content {
    .records-pane {
      padding: 0.6rem 0.6rem 0 0.6rem; 
      .history-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .history-name {
          font-size: 0.85rem;
          font-weight: 600;
          color: #00001C;
        }
        .icon-fontclass-shanchu {}
      }
      .history-content {
        margin-top: 0.5rem;
        display: flex;
        flex-wrap: wrap;
        .detail-rol {
          background: white;
          border-radius: 0.8rem;
          padding: 0.25rem 0.55rem;
          margin: 0 0.3rem 0.5rem 0;
          .detail-name {
            font-size: 0.8rem;
            color: #00001C;
            margin-right: 0.2rem;
          }
          .van-icon {

          }
        }
      }
    }

    
    .top-search {
      background: white;
      padding: 0.6rem 0.8rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .search {
        width: 100%;
        height: 1.95rem;
        background-color: #f2f2f2;
        display: flex;
        align-items: center;
        color: #999999;
        border-radius: 1.3rem;
        form {
          width: 90%;
          height: 100%;
        }
        input {
          outline: none;
          border: none;
          text-indent: 1rem;
          width: 100%;
          height: 100%;
          font-size: 0.8rem;
        }

        .icon-sousuo1 {
          position: relative;
          left: 0.7rem;
        }
      }

    }
  }

  .bottom-content {
    margin: 0.75rem 0.6rem 0 0.6rem;
    background: white;
    border-radius: 0.4rem;
    .goods-box:last-child {
      padding-bottom: 0.8rem;
    }
    .goods-box {
      display: flex;
      padding: 0.8rem 0 0 0.8rem;
      img {
        width: 5rem;
        height: 5rem;
        border-radius: 0.4rem;
        margin: 0;
      }
      .popup-img {
        width: 4rem;
        height: 4rem;
      }
      .goods-detail {
        text-align: left;
        margin: 0 0.6rem 0 0.4rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: calc(100% - 5rem);
        .popup-name {
          font-size: 0.8rem !important;
        }
        .goods-name {
          font-size: 0.9rem;
          font-weight: 600;
          color: #3B3B4A;
          display: -webkit-box;     
          -webkit-line-clamp: 2;     
          -webkit-box-orient: vertical; 
          overflow: hidden;           
          text-overflow: ellipsis;   
        }
        .bot-price {
          display: flex;
          align-items: center;
              justify-content: space-between;
          .price-name {
            font-size: 0.9rem;
            font-weight: 600;
            color: #F15353;
            .icon-sty{
              zoom: 0.7;
            }
          }
          .add-icon {
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #F15353;
            color: white;
          }
          .del-icon {
            width: 1.5rem;
            height: 1.5rem;
            border: 0.025rem solid #F15353;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #F15353;
            background: white;
          }
        }
      }
    }
    .tip-text {
      height: 5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #686868;
    }
  }

  .fixed {
    position: fixed;
    bottom: 0;
    height: 3.2rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
    padding: 0 1rem;
    box-shadow:
      0 0 0.125rem 0
      rgba(0, 0, 0, 0.1);
    background-color: #fff;
    
    .fixed-top {
      display: flex;
      align-items: center;
    }

    .cho-goods {
      display: flex;
      align-items: center;
      position: relative;
      margin-right: 0.8rem;
      .icon-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.2rem;
        height: 2.2rem;
        background: linear-gradient(329deg, #FF1313 0%, #FB7676 100%);
        border-radius: 50%;
        .icon-gouwuche_ {
          color: #FFFFFF;
          zoom: 1.4;
        }
      }
      .cho-num {
        display: flex;
        width: 1.1rem;
        height: 1.1rem;
        background: #FCA624;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        color: white;
        position: absolute;
        right: -0.5rem;
        top: -0.2rem;
      }
    }

    .btn {
      width: 4.8rem;
      color: #fff;
      font-size: 0.85rem;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 2.3rem;
      background-color: #F15353;
      border-radius: 1.25rem;
    }
  }
  
  .popup-box {
    padding: 0.75rem 0.6rem;
    .popup-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .popup-top-left {
        font-size: 0.9rem;
        font-weight: bold;
        color: #3B3B4A;
      }
      .popup-clear {
        font-size: 0.7rem;
        font-weight: 400;
        color: #AAAAB3;
        display: flex;
        align-items: center;
        .icon-fontclass-shanchu {}
      }
    }
  }
}

.pc {
  width: 375px !important;
}
</style>
